<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script>
    $(function(){
        // 这种方式只作用于页面当前存在的选择器，即1,2,3,4。动态创建的5和6都是无法触发click的回调的
        // 除非$('ul').append('<li>5</li><li>6</li>');放在$('ul>li').click()之前，因为这样5和6对于click()就算存在了
        // $('ul>li').click(function(){
        //     console.log($(this).html());
        // });
        // $('ul').append('<li>5</li><li>6</li>');

        // 用这种方式的话就算5和6在后面动态创建出来也能触发click事件，原理后面再研究
        $('body').on('click','ul>li',function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>